<template>
  <div class="app-main">
    <div class="nav-top">
      <el-cascader :options="options"
                   :props="props"
                   :show-all-levels="false"
                   @change="handleCommand"
                   v-model="selVal" />
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, unref, watch, onMounted } from 'vue'
const router = useRouter()

function handleCommand(val) {
  router.push({
    name: val[1],
  })
}

const options = [
  {
    value: '',
    label: 'day1-10',
    children: [
      { value: 'day1', label: '瀑布流' },
      // { value: 'day2', label: '倒计时' },
      // { value: 'day3', label: '菜单滚刀肉' },
      // { value: 'day4', label: '打字机' },
      // { value: 'day5', label: '背景图滑动' },
      // { value: 'day6', label: '背景进度共渐变' },
      // { value: 'day7', label: '按钮点击起涟漪' },
      // { value: 'day8', label: '内容加载前的占位' },
      // { value: 'day9', label: '自定义进度条' },
      // { value: 'day10', label: '双击出现小心心' },
    ],
  },
]

const selVal = ref(null)

watch(
  () => router.currentRoute.value.name,
  (val) => {
    if (!selVal.value) {
      selVal.value = ['', val]
    }
  }
)
const props = {
  expandTrigger: 'hover',
}
</script>

<style lang="scss" scoped>
.app-main {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;

  .nav-top {
    position: fixed;
    top: 8px;
    right: 15px;
    z-index: 999;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
}
</style>
